<template>
	<view style="padding: 26rpx;">
		<view class="order_box" v-if="!is_null">
			<view class="one_order" v-for="(item,index) in tableData" :key="index">
				<view class="uinfo">
					<view><image :src="item.avatar" style="width: 100rpx;height: 100rpx;border-radius: 50%;margin-right: 10rpx;"></image></view>
					<view>{{item.nickname}}</view>
				</view>
				<view class="time">{{item.createtime}}</view>
			</view>
		</view>
		
		<view v-if="is_null">
			<view class="no_data">
				<image src="/static/no_record.png" mode="widthFix" class="image"></image>
				<view >{{$t('no_data')}}</view>
			</view>
		</view>
		<view style="height: 80rpx;"></view>
		
		<view class="bottom_box">
			  <view style="padding: 20rpx 40rpx; 40rpx 40rpx">
				  <view v-if="group_id != 4" style="font-size: 24rpx;margin-bottom: 10rpx;padding-left: 10rpx;color: red;">已免费获取{{userData.total_hours_history}}小时，剩余{{userData.total_hours}}小时</view>
				  <view v-if="group_id == 4" style="font-size: 24rpx;margin-bottom: 10rpx;padding-left: 10rpx;color: red;">已获取佣金{{userData.total_income_history}}元，剩余{{userData.total_income}}待提现</view>
				  <view style="display: flex;justify-content: space-between;">
					  <view style="width: 45%;">
					  		  <u-button :text="shareTit1" color="#e0e0e0"  @click="showRule()" shape='circle' type='default' size='large'></u-button>
					  </view>
					  <view style="width: 45%;">
					  		  <u-button :text="shareTit2" color="#746ef6"  @click="previewImage()" shape='circle'  size='large'></u-button>
					  </view>
				  </view>
				  
			  </view>
			  
		  </view>
		  
		  <uni-popup ref="popupShowRule" background-color="#fff" @change="change">
		  	<view class="popup-content" style="padding: 30rpx;color: #000;width: 600rpx;">
		  		<view v-if="group_id == 4">
					<view style="font-size: 32rpx;font-weight: 600;margin-bottom: 10rpx;">推广规则:</view>
					<view>{{ruleTip}}</view>
				</view>
				<view v-else>
					<view style="font-size: 32rpx;font-weight: 600;margin-bottom: 10rpx;">分享规则:</view>
					<view>{{ruleTip}}</view>
				</view>
		  	</view>
		  </uni-popup>
	</view>
</template>

<script>
import {shareList} from "@/api/my.js";
export default {
	data() {
		return {
			tableData:[],
			userData:{},
			group_id:1,
			 is_null:false,
			 shareTit1:"分享规则",
			 shareTit2:"我的分享码",
			 ruleTip:''
		}
	},
	onLoad(options) {
		this.group_id = options.group_id;
		if(this.group_id == 4){
			uni.setNavigationBarTitle({
				title: "我的推广"
			})
			this.shareTit1 = "推广规则";
			this.shareTit2 = "我的推广码"
		}
	},
	onShow() {
		this.sharelistFunc();
	},
	methods: {
		sharelistFunc(){
			shareList().then(res=>{
				if(res.code == 0){
					this.tableData = res.data.shareData;
					this.userData = res.data.userData;
					this.ruleTip = res.data.ruleTip;
					if(this.tableData.length >0){
						this.is_null = false;
					}else{
						this.is_null = true;
					}
					
				}else{
					if(res.code == -555){
						uni.$u.toast(res.msg)
					}
					this.tableData = [];
					this.is_null = true;
				}
			})
		},
		change(e){
			
		},
		showRule(){
			this.$refs.popupShowRule.open('center')
		},
		previewImage(e) {
			//我这里 URLS 置空的原因是 我不需要预览，只需要开启 图片的 :show-menu-by-longpress="true"  属性，就可以识别出长按操作；需要预览的多张图片的URL 可以直接放在 URLS 里即可用！
			//可以根据自己的业务 把 current 设置为 e.target.src 属性，动态的把当前路径写为 当前预览图片地址！
			//版权声明：本文为CSDN博主「Fashion_Barry」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
			//原文链接：https://blog.csdn.net/weixin_56650035/article/details/122147640
			console.log('e', e);
			var erweima = this.userData.qrcode;
			uni.previewImage({
				// 需要预览的图片链接列表
				urls: [erweima],
				// 为当前显示图片的链接/索引值 e.target.src
				current: erweima,
				// 图片指示器样式
				indicator:'default',
				// 是否可循环预览
				loop:false,
				// 长按图片显示操作菜单，如不填默认为保存相册
				// longPressActions:{
				// 	itemList:[this.l('发送给朋友'),this.l]
				// },
				success: res => {
					console.log('res', res);
				},
				fail: err => {
					onsole.log('err', err);
				}
			});
		},
	}
}
</script>

<style>
page{
	background-color:#f6f6f6;
}
.order_box{
	border-radius: 22rpx;
	background-color: #fff;
}
.one_order{
	background-color: #fff;
	padding: 28rpx 28rpx;
	border-bottom: 1rpx solid #f1f1f1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #8b8686;
	border-radius: 22rpx;
}
.uinfo{
	display: flex;
	align-items: center;
}

.no_data{
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		font-size: 24rpx;
		color: #000;
		margin-top: 30%;
	}
	.no_data .image{
		width: 240rpx;
		height: auto;
		margin: auto;
	}
.bottom_box{
	position: fixed;
	bottom: 0rpx;
	left: 0;
	width: 100%;
	background-color: #fff;
}
</style>
